<template>
    <div class="service">
        <div class="banner container-fuild text-center">律师服务</div>
        <div class="container">
          <div class="laywer-container">
            <div v-for="it in laywerList" :key="it.id" class="laywer-item" @click="viewDetail(it.id)">
              <img :src="it.img" alt="">
              <div>
                <span>{{it.name}}</span>
                <img src="@/assets/img/plug.png" alt="">
              </div>
            </div>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="90">
          </el-pagination>
        </div>
    </div>
</template>
<script>
import { WOW } from 'wowjs';
export default {
    name: 'LaywerService',
    data(){
        return{
          laywerList: [{
            img: require("@/assets/img/laywer.png"),
            id: '111',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '112',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '113',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '114',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '115',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '116',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '117',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '118',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '119',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '120',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '121',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '122',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '123',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '124',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '125',
            name: '李舒维律师'
          },{
            img: require("@/assets/img/laywer.png"),
            id: '126',
            name: '李舒维律师'
          }],
        }
    },
    mounted(){
        var wow = new WOW();
        wow.init();
        this.$util.post('api/lawyer/getLawyerList',{}).then(res=>{
          console.log(res,'88888888888888')
        })
    },
    methods:{
      viewDetail(id) {
        this.$router.push({path: `laywerDetail/${id}`})
      }
    }
}
</script>
<style scoped>
.banner {
    color: #fff;
    font-size: 30px;
    height: 300px;
    line-height: 150px;
    background-image: url('../assets/img/banner1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
}
.laywer-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.laywer-container .laywer-item {
  width: 21.5%;
  margin-right: 3.5%;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}
.laywer-container .laywer-item img {
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.laywer-container .laywer-item div {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.laywer-container .laywer-item div img {
  width: 20px;
  height: 20px;
  border: none;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
</style>
